
const util = require('../../utils/util.js');
const API = require('../../utils/ajax.js');
const app = getApp();
import  echarts from '../../ec-canvas/echarts.js';//导入echart图表文件



Page({

  /**
   * 页面的初始数据
   */
  data: {
    time:'',
    ec: { lazyLoad: true},// 将 lazyLoad 设为 true 后，需要手动初始化图表
    longitude:'',
    latitude:'',
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    height: wx.getSystemInfoSync().windowHeight,
    playIndex: 0, 
    timer: null,
    markers: [],
    polyline: [],
    pointsInfo:[],
    trackLocation:[],
    vid:'',
    brandNumber:' 分段轨迹',
    rotate:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let {vid}=options
    this.setData({vid})
    console.log(vid)
    this.echartsComponnet = this.selectComponent('#mychart-dom-line');
    this.init_echarts()
    this.timeInit()
    this.getTrack()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  //打开透明层
  showRule: function () {
    this.setData({
      isRuleTrue: true
    })
  },
  //关闭透明层
  hideRule: function () {
    this.setData({
      isRuleTrue: false
    })
  },

  timeInit:function(){
    // 调用函数时，传入new Date()参数，返回值是日期和时间
    var time = util.formatTime(new Date());
    // console.log(time)
    // 再通过setData更改Page()里面的data，动态更新页面的数据
    this.setData({
      time: time.yyyy_mm_dd_hh_mm_ss
    });
  },
  
  async getTrack(date){
    let that=this
    date=date||'2020-09-09';
    let {vid}=this.data;
    let res=await API.getSubsectionTrackList(vid,date)
    let pointsInfo=[];
    let points=[];
    if(res.code===0){
      let _pointsInfo=res.data;
      pointsInfo=pointsInfo.concat(_pointsInfo)
      that.setData({
        pointsInfo,
        polyline:[{
          points: res.data[0].trackLocation,
          color: "#33ccff",
          width: 4,
          dottedLine: false
        }],
        markers:[{
          iconPath:'../../assets/images/test/car.png',
          id:0,
          latitude: res.data[0].trackLocation[0].latitude,
          longitude: res.data[0].trackLocation[0].longitude,
          width: 30,
          height: 30,
          title: this.data.brandNumber,
          rotate:res.data[0].trackLocation[0].head,
          callout:{
            content:this.data.brandNumber + ' \n 时间：' + res.data[0].trackLocation[0].gpsTime + ' \n 速度：' + res.data[0].trackLocation[0].gpsSpeed + ' km/h',
            color: "#000000",
            fontSize: 13,
            borderRadius: 2,
            bgColor: "#fff",
            display: "ALWAYS",
            boxShadow: "5px 5px 10px #aaa",
            padding:5
          }
        }],
        latitude: res.data[0].trackLocation[0].latitude,
        longitude: res.data[0].trackLocation[0].longitude,
      })
      
    }
  },
  beginTrack:function(){
    var that = this;
    var i = that.data.playIndex == 0 ? 0 : that.data.playIndex;
    var latitude='';
    var longitude='';
    var rotate='';
    console.log(that.data)
    that.timer=setInterval(function(){
      i++;
      that.setData({
        playIndex: i,
        latitude: that.data.polyline[0].points[i].latitude,
        longitude: that.data.polyline[0].points[i].longitude,
        
        markers:[{
          iconPath: '../../assets/images/test/car.png',
          id:0,
          latitude: that.data.polyline[0].points[i].latitude,
          longitude: that.data.polyline[0].points[i].longitude,
          rotate:that.data.polyline[0].points[i].head,
          width: 30,
          height: 30,
          title: that.data.brandNumber,
          callout: {
            content: that.data.brandNumber + ' \n 时间：' + that.data.pointsInfo[0].trackLocation[i].gpsTime + ' \n 速度：' + that.data.pointsInfo[0].trackLocation[i].gpsSpeed + ' km/h',
            color: "#000000",
            fontSize: 13,
            borderRadius: 2,
            bgColor: "#fff",
            display: "ALWAYS",
            boxShadow: "5px 5px 10px #aaa"
          }
        }]
      })
      
      
      if ((i+1) >= that.data.polyline[0].points.length) { 
        that.endTrack();
      }
    },500)
  },
  pauseTrack:function(){
    var that = this;  
    clearInterval(this.timer)
  },
  endTrack:function(){
    var that = this;
    that.setData({
      playIndex: 0,
      latitude: that.data.polyline[0].points[0].latitude,
      longitude: that.data.polyline[0].points[0].longitude,
      markers:[{
        iconPath: '../../assets/images/test/location.png',
        id: 0,
        latitude: that.data.polyline[0].points[0].latitude,
        longitude: that.data.polyline[0].points[0].longitude,
        width: 30,
        height: 30,
        title: that.data.brandNumber,
        callout: {
          content: that.data.brandNumber + ' \n 时间：' + that.data.pointsInfo[0].trackLocation[0].gpsTime + ' \n 速度：' + that.data.pointsInfo[0].trackLocation[0].gpsSpeed + ' km/h',
          color: "#000000",
          fontSize: 13,
          borderRadius: 2,
          bgColor: "#fff",
          display: "ALWAYS",
          boxShadow: "5px 5px 10px #aaa"
        }
      }]
    })
    clearInterval(this.timer)
  },
  async init_echarts(date){
    let that = this
    date=date||'2020-09-09'
    let optionData=[];
    let {vid}=that.data;
    let time=[];
    let speed=[];
    const res=await API.getSubsectionTrackList(vid,date)
    if(res.code===0){
      let _optionData=res.data[0].trackLocation;
      optionData=optionData.concat(_optionData)
      optionData.map((item)=>{
        let gpsSpeed=item.gpsSpeed;
        speed.push(gpsSpeed)
        return speed
      })
      // console.log(speed)
      optionData.map(item=>{
        let gpsTime=item.gpsTime.slice(11)
        time.push(gpsTime)
        return time
      })
   
      that.setData({
        optionData,
        time,
        speed
      })
    }

    this.echartsComponnet.init((canvas, width, height, dpr)=>{
       // 初始化图表
       const charts = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
      });
      canvas.setChart(charts);
      let option={
        xAxis: {
          type: 'category',
          data: time
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: speed,
          type: 'line',
          smooth: true
      }],
      dataZoom:[
        {
          id: 'dataZoomX',
          type: 'slider',
          start: 0,
          end: 30,
       }
      ]
      }
      charts.setOption(option);
      return charts;
    })
  },
  
})

